<template>
    <div class="template">
        <div class="nav" style="background-color: #292C31;">
            <img :src="black" style="width: 51px;" @click="router.back()"/>
            Store
            <div style="width: 51px;"></div>
        </div>
        <div class="look">
            <div style="position: relative;">
                <img :src="coinsbg" style="width: 100%;height: 24vh;" />
                <div class="cardLook" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: flex;flex-direction: column;align-items: center;">
                    <div style="margin-top: 10px;">Get more</div>
                    <div>currency</div>
                    <div style="margin-top: 10px;" class="lookNum">Surplus: {{ coinsNum }}</div>
                </div>
                <div class="buyList">
                    <div v-for="(item, index) in buyList" :key="index" style="position: relative;" @click="buyItem(index)">
                        <img :src="coinsbg" style="width: 44vw;"/>
                        <div class="buy">
                            <div style="display: flex;align-items: center;"><img :src="coins" style="width: 36px;margin-right: 10px;" /> {{ item.num }} </div>
                            <div class="money">${{ item.money }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { showToast, showLoadingToast, closeToast } from 'vant';
import coins from '../assets/coins@2x.png'
import coinsbg from '../assets/coinsbg@2x.png'
import black from '../assets/black.png'
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue'
const router = useRouter()
import {Base64} from 'js-base64'

let buyList = [{num: 20, money: 1.99 },{num: 50, money: 2.99 },{num: 100, money: 4.99 },{num: 200, money: 9.99 },{num: 500, money: 14.99 },{num: 1000, money: 19.99 }]
const coinsNum = ref(0)
onMounted(() => {
    coinsNum.value = localStorage.getItem('MakeQRCoinsNum') ? Number(localStorage.getItem('MakeQRCoinsNum')) : 0
})
const buyItem = (index) => {
    showLoadingToast({
      duration: 0,
      message: 'Loading...',
      forbidClick: true,
    });
     window['iap'] = (data) => {
            let res;
            try {
                const decodedString = Base64.decode(data);
                res = JSON.parse(decodedString);
            } catch (error) {
                res = data;
            }
            if (res !== null && typeof res === 'object') {
                let num = res.productIdentifier.replace(/\D/g, '');
    			coinsNum.value = coinsNum.value + Number(num)
                localStorage.setItem('MakeQRCoinsNum', coinsNum.value)
    			closeToast()
            } else {
                closeToast()
                showToast('Payment failed!');
            }
            return 0;
    }
    window['send'](`terms://buy?product=com.moreuse.edtings.${buyList[index].num}s&num=1`);
}
</script>
<style scoped>
.look {
    margin-top: 3vh;
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
}
.cardLook {
    font-weight: bold;
    font-size: 38px;
    color: #FFFFFF;
}
.lookNum {
    padding: 0 20px;
    box-sizing: border-box;
    height: 7vh;
    background: #80C978;
    border-radius: 66px 66px 66px 66px;
    font-weight: bold;
    font-size: 27px;
    color: #FFFFFF;
    text-align: center;
    line-height: 7vh;
}
.buyList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.buy {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 30px;
    color: #FFFFFF;
}
.money {
    width: 124px;
    height: 31px;
    background: #80C978;
    border-radius: 33px 33px 33px 33px;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    line-height: 31px;
    margin-top: 10px;
}
</style>